<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='root'>
        <input type="text" placeholder="添加新闻内容" v-model='setNews'>
        <button type="submit" @click='addNews'>添加新闻内容</button>
        <ul>
            <template v-for='item in arrList'>
                <li>{{item}}</li> 
           </template>
        </ul>
        <button @click='nextData' v-if='showbtn'>查询</button>
    </div>

    <script src="./js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                setNews: '',
                startNum: 1,
                nums: 10,
                arrList: [],
                counts: 0,
                showbtn: true
            },
            watch: {
                setNews(newsValue, oldValue) {
                    console.log(newsValue)
                }
            },
            updated() {

            },
            methods: {

                addNews() {
                    var arr = this.setNews
                    console.log(this.setNews, 'ashdf')
                    let url = 'http://127.0.0.1:8080/add'
                    fetch(url, {
                        method: 'POST',
                        // json字符串
                        body: JSON.stringify({
                            arr
                        }),
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                    this.setNews = ''

                    let url1 = 'http://127.0.0.1:8080/findList'

                    axios.get(url1).then(res => {
                        let num = 0
                        res.forEach((v, k) => {
                            num += 1
                        })
                        this.counts = num
                        if (this.arrList.length >= this.counts - 1) {
                            this.showbtn = false
                        } else {
                            this.showbtn = true

                        }
                    })
                },
                async nextData() {
                    let url = 'http://127.0.0.1:8080/find'
                    let arr1 = await axios.post(url, {
                        start: this.startNum,
                        nums: this.nums
                    })

                    let arr2 = []
                    arr1.forEach((v, k) => {
                        // arr2.push(v.news)
                        this.arrList.push(v.news)
                    })

                    //与总数进行对比
                    let url1 = 'http://127.0.0.1:8080/findList'
                    let arr = await axios.get(url1)
                    let num = 0
                    arr.forEach((v, k) => {
                        num += 1
                    })
                    this.counts = num
                        // this.arrlist = arr2
                    console.log(this.arrList.length, this.counts, 'asd')
                    if (this.arrList.length >= this.counts - 1) {
                        this.showbtn = false
                        window.confirm('已经没有数据了')
                    } else {
                        this.startNum += 10
                    }
                }
            }
        })
    </script>
</body>

</html>